<template>
  <div class="login-wrapper">
    <div class="login-container">
      <div class="login">
        <div class="title"><img src="/images/logo.png" style="height:50px;margin-right:10px" alt="">下沉执法人员排班系统</div>
        <!--非二维码登录登录内容-->
        <div class="login-inner">
          <div class="login-item">
            <i class="iconfont icon-use"></i>
            <input
              type="text"
              v-model="username"
              autocomplete="off"
              placeholder="请输入用户名"
              maxlength="15"
            >
            <span class="info" :class="{'fail': !this.userRule, 'pass': this.userRule}" v-if="userfocus">
              <i class="iconfont" :class="{'icon-tishishuoming': !this.userRule, 'icon-yanzhengtongguo': this.userRule}"></i>{{userMessage}}
            </span>
          </div>
          <div class="login-item">
            <i class="iconfont icon-07"></i>
            <input
              @keyup.enter="handleLogin"
              type="password"
              v-model="password"
              placeholder="请输入密码"
              autocomplete="off"
              minlength="6"
              maxlength="15"
            >
            <span class="info" :class="{'fail': !this.pwdRule, 'pass': this.pwdRule}" v-if="pwdfocus">
              <i class="iconfont" :class="{'icon-tishishuoming': !this.pwdRule, 'icon-yanzhengtongguo': this.pwdRule}"></i>{{pwdMessage}}
            </span>
          </div>
          <button @click="handleLogin">登录</button>
        </div>
      </div>
    </div>
    <transition name="tipMove">
      <alert-tip :alertText="alertText" v-if="showAlert" @closeTip="closeTip"></alert-tip>
    </transition>
  </div>
</template>
<script>
import alertTip from '~/components/common/alertTip.vue';

export default {
  data() {
    return {
      ts: this.newStore(),
      verifyCode: 0, // 后端返回状态码
      currentId: '', // 当前药房id
      user: false,
      pwd: false,
      username: '', // 用户输入的用户名
      password: '', // 用户输入的密码
      userfocus: false, // 判断用户是否开始输入用户名
      userRule: '', // 判断username是否合法
      userMessage: '', // 输出username提示信息
      pwdfocus: false, // 判断用户是否开始输入密码
      pwdRule: '', // 判断password是否合法
      pwdMessage: '', // 输出password提示信息
      showAlert: false,
      alertText: '',
    };
  },
  created() {
    localStorage.setItem('token', '');
    localStorage.setItem('belongunit', '');
    localStorage.setItem('username', '');
    localStorage.setItem('resdate', '');
  },
  watch: {
    username(val) {
      if (val !== '') {
        this.userfocus = true;
      }
      if (val) {
        this.userMessage = '通过';
        this.userRule = true;
      } else {
        this.userMessage = '请输入';
        this.userRule = false;
      }
      // if (/^[0-9A-Za-z_]{3,15}$/.test(val)) {
      //   this.userMessage = '通过';
      //   this.userRule = true;
      // } else {
      //   this.userMessage = '请输入6-15位字母数字和下划线的组合';
      //   this.userRule = false;
      // }
    },
    password(val) {
      if (val !== '') {
        this.pwdfocus = true;
      }
      if (val) {
        this.pwdMessage = '通过';
        this.pwdRule = true;
      } else {
        this.pwdMessage = '请输入';
        this.pwdRule = false;
      }
      // if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/.test(val)) {
      //   this.pwdMessage = '通过';
      //   this.pwdRule = true;
      // } else {
      //   this.pwdMessage = '请输入6-15位字母数字的组合';
      //   this.pwdRule = false;
      // }
    },
  },
  methods: {
    handleLogin() {
      if (this.userRule && this.pwdRule) {
        this.getuserInfo(this.username, this.password);
      } else {
        // this.showAlert = true;
        // this.alertText = '输入格式有误，请重新输入';
        this.$alert('输入格式有误，请重新输入', '登陆失败', {
          confirmButtonText: '确定',
        });
        this.username = '';
        this.password = '';
        this.userfocus = false;
        this.pwdfocus = false;
      }
    },
    closeTip() {
      this.showAlert = false;
    },
    getuserInfo(username, pwd) {
      const req = {
        handle: 'E299744D88ADCDF5C56442DDF419DB4E33B34DAB6D91425D',
        id: username,
        passwords: pwd,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          localStorage.setItem('token', ts.d.token);
          localStorage.setItem('belongunit', ts.d.data.operation3[0].hash.belongunit);
          localStorage.setItem('username', ts.d.data.operation3[0].hash.username);
          localStorage.setItem('resdate', ts.d.data.operation3[0].hash.resdate);
          localStorage.setItem('orgname', ts.d.data.operation3[0].hash.orgname);
          this.$root.reload = false;
          this.$nextTick(() => {
            this.$root.reload = true;
          });
          if (localStorage.getItem('belongunit') == '2' || localStorage.getItem('belongunit') == '4') {
            this.$router.push('/glmanager');
          } else {
            this.$router.push('/glmanager');
          }
        } else {
          this.showAlert = true;
          this.alertText = '账号或密码错误';
        }
      }).catch((d) => {
        console.log(d);
      });
    },
  },
  components: {
    alertTip,
  },
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  .login-wrapper
    position: absolute
    top: 0
    right: 0
    left: 0
    bottom: 0
    background: rgb(102, 122, 123)
    .login-container
      width: 40%
      margin: 0 auto
      position: relative
      .login
        width: 100%
        margin: 100px auto 0
        background: #fff
        padding: 20px
        .title
          text-align: center
          font-size: 28px
          line-height: 50px
          color: rgb(102, 122, 123)
        ul
          margin: 0 auto
          display: flex
          li
            text-align: center
            padding-bottom: 15px
            flex: 1
            cursor: pointer
            color: #999
            border-bottom: 1px solid #999
            &.active
              color: #333
              border-color: #5DD5C8
        .login-inner
          margin: 30px 15px 45px 15px
          .login-item
            position: relative
            margin-bottom: 30px
            padding: 3px 0 3px 15px
            border: 1px solid #999
            height: 40px
            line-height: 32px
            font-size: 0
            .iconfont
              display: inline-block
              vertical-align: top
              font-size: 20px
              margin-right: 3px
            input
              width 80%
              display: inline-block
              vertical-align: top
              border: 0 none
              outline: 0 none
              height: 100%
              font-size: 14px
              &:-webkit-autofill
                background-color: #FAFFBD
                background-image: none
                color: #000
            .info
              position: absolute
              font-size: 12px
              .iconfont
                margin-right: 5px
                font-size: 16px
                &.icon-tishishuoming
                  font-size: 14px
              &.fail
                color: #e4393c
                left: 18px
                bottom: -30px
              &.pass
                color: #0c0
                right: 5px
                bottom: 3px
            button
              border: 0 none
              background: #6699FF
              color: #fff
              font-size: 18px
              display: block
              padding: 8px 0
              line-height: 34px
              width: 100%
          button
            border: 0 none
            background: rgb(102, 122, 123)
            color: #fff
            font-size: 18px
            display: block
            padding: 8px 0
            line-height: 34px
            width: 100%
</style>
